<template>
  <el-row :gutter="20">
    <el-pagination
      style="text-align: center;"
      background
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="32"
      :page-size="pageSize"
      :total="totalPage"
      layout="prev, next"
    ></el-pagination>
    <br>
    <el-col :span="4">
      <div>
        <div>
          <el-button @click="sellOffAll(null, 0, 1)">全部沽清</el-button>
        </div>
        <br>
        <div>
          <el-button @click="sellOffAll(null, 1, 1)">全部取消</el-button>
        </div>
      </div>
      <br>
    </el-col>
    <el-col :span="20" style="height: 46.75rem;">
      <el-tabs type="card" v-model="activeName" @tab-click="getFoodList">
        <el-tab-pane label="全部" name="0">
          <el-row :gutter="12">
            <el-col :span="6" v-for="item in foodList" :key="item.id">
              <a style="cursor: pointer;text-decoration: none;" @click="selelctFood(item)">
                <div style="height: 100px;border: 0.0125rem solid lightgray;border-radius: 0.25rem;">
                  <el-row :gutter="3">
                    <el-col :span="14">
                      <img v-show="item.foodImg !==''" style="width: 100%;height: 98px;" :src="item.foodImg"/>
                      <img v-show="item.foodImg ===''" style="width: 100%;height: 98px"
                           src="../../../../../assets/img/no-img1.png"/>
                    </el-col>
                    <el-col :span="10">
                      <div style="padding-top: 1.25rem;">
                        <div class="cursor" style="color: #000000;">
                          {{ item.foodName }}
                          <span v-if="item.sellOffStatus === 0" style="color: #f93e3e">(已沽清)</span>
                        </div>
                        <br>
                        <div class="cursor" style="color: red;">￥{{ item.price }}元</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </a>
              <br/>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane v-for="item in foodTypeList" :key="item.id" :label="item.classificationName" :name="item.id">
          <el-row :gutter="12">
            <el-col :span="6" v-for="items in foodList" :key="item.id">
              <a style="cursor: pointer;text-decoration: none;" @click="selelctFood(items)">
                <div style="height: 100px;border: 0.0125rem solid lightgray;border-radius: 0.25rem;">
                  <el-row :gutter="3">
                    <el-col :span="14">
                      <img v-show="items.foodImg !==''" style="width: 100%;height: 98px;" :src="items.foodImg"/>
                      <img v-show="items.foodImg ===''" style="width: 100%;height: 98px"
                           src="../../../../../assets/img/no-img1.png"/>
                    </el-col>
                    <el-col :span="10">
                      <div style="padding-top: 1.25rem;">
                        <div class="cursor" style="color: #000000;">{{ items.foodName }}
                          <span v-if="items.sellOffStatus === 0" style="color: #f93e3e">(已沽清)</span>
                        </div>
                        <br>
                        <div class="cursor" style="color: red;">￥{{ items.price }}元</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </a>
              <br/>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data () {
    return {
      foodTypeList: [],
      foodList: [],
      activeName: 0,
      selectFoodList: [],
      foodIdList: [],
      totalMoney: 0,
      num: 0,
      index: 0,
      idArray: [],
      pageIndex: 1,
      pageSize: 24,
      totalPage: 0
    }
  },
  created () {
    this.getFoodTypeList()
    this.getDataList()
  },

  methods: {
    selelctFood (food) {
      // 售罄
      if (food.sellOffStatus === 0) {
        this.$confirm('是否取消沽清菜品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.sellOff(food, 1,0)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
      if (food.sellOffStatus === 1) {
        this.$confirm('是否沽清菜品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.sellOff(food, 0, 0)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消沽清'
          })
        })
      }
    },

    // 沽清全部
    sellOffAll (food, status, batch) {
      this.sellOff(food, status, batch)
    },

    sellOff (food, status, batch) {
      this.$http({
        url: this.$http.adornUrl('/store/tstorefood/sellOff'),
        method: 'get',
        params: this.$http.adornParams({
          id: food !== null ? food.id : null,
          status: status,
          batch: batch
        })
      }).then(() => {
        this.$message({
          type: 'success',
          message: '沽清成功!'
        })
        this.getDataList()
      })
    },

    getFoodList (tab, event) {
      if (this.pageIndex > 1) {
        this.pageIndex = 1
      }

      var typeId = null
      if (tab === 0) {
        typeId = 0
      } else {
        typeId = tab.name
        this.typeId = typeId
      }
      this.$http({
        url: this.$http.adornUrl('/store/tstorefood/listFoodShow'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          typeId: typeId,
          key: '',
          useRange: 1
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.foodList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.foodList = []
          this.totalPage = 0
        }
      })
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    getFoodTypeList () {
      // 获取菜品分类
      this.$http({
        url: this.$http.adornUrl('/store/tstorefoodtype/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: 1,
          limit: 100,
          key: ''
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.foodTypeList = data.page.list
        } else {
          this.foodTypeList = []
          this.totalPage = 0
        }
      })
    },
    getDataList () {
      this.$http({
        url: this.$http.adornUrl('/store/tstorefood/listFoodShow'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          typeId: 0,
          key: '',
          useRange: 1
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.foodList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.foodList = []
          this.totalPage = 0
        }
      })
    }
  }
}
</script>

<style>
</style>
